﻿
@page "/rich-text-editor/api"

@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.RichTextEditor

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the usage of API in Rich Text Editor. Use the properties panel to change the maximum length, read only mode, disable status, to get value, enable HTML encode, select all content and get selected HTML from the Rich Text Editor.</p>
</SampleDescription>
<ActionDescription>
    <p>In this demo, Ensuring the API'S behaviour by doing</p>
    <ul>
        <li>Change the value of <code>MaxLength</code> textbox to change maximum Length of the character.</li>
        <li>Click the <code>ReadOnly</code> check box to enable/disable editable and non-editable mode of the RTE.</li>
        <li>Click the <code>Enabled</code> check box to enable/disable the RTE component.</li>
        <li>Click the <code>EnableHtmlEncode</code> check box to enableHtmlEncode/disableHtmlEncode the RTE component.</li>
        <li>Click the <code>GetValue</code> button which shows the RTE values in the alert window.</li>
        <li>Click the <code>SelectAll</code> button to select all the text content in the RTE.</li>
    </ul>
</ActionDescription>

<div class="col-lg-8 control-section" id="target">
    <div class="control-wrapper">
        <div class="sample-container">
            <div class="default-section">
                <SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
                          Width="400px" ShowCloseIcon="true">
                    <DialogButtons>
                        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
                    </DialogButtons>
                </SfDialog>
                <SfRichTextEditor @ref="defaultAPIObj" @bind-Value="@RteValue" ShowCharCount="true" MaxLength="@MaxLength" Readonly="@ReadOnly"
                                  Enabled="@Enabled" EnableHtmlEncode="@EnableHtmlEncode" />
            </div>
        </div>
    </div>
</div>
<div class="col-lg-4 property-section">
    <div id="property" title="Properties">
        <table id="property" title="Properties">
            <tbody>
                <tr>
                    <td>
                        <div>Maximum Length </div>
                    </td>
                    <td>
                        <div>
                            <SfNumericTextBox Step="1" @bind-Value="@MaxLength" Min="555" Max="2000" Format="n0" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>ReadOnly </div>
                    </td>
                    <td>
                        <div>
                            <SfCheckBox @bind-Checked="@Checkbox1" ValueChange="ReadOnlyChange" TChecked="bool" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Enabled </div>
                    </td>
                    <td>
                        <div>
                            <SfCheckBox @bind-Checked="@Checkbox2" ValueChange="EnableChange" TChecked="bool" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Enable Html Encode </div>
                    </td>
                    <td>
                        <div>
                            <SfCheckBox @bind-Checked="@Checkbox3" ValueChange="EnableHtmlChange" TChecked="bool" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div>
                            <button id="getVal" class="btn btn-default" @onclick="GetValueClick">Get Value</button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div>
                            <button id="selectall" class="btn btn-default" @onclick="SelectAllonClick">Select All </button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<style>
    .property-section table td {
        width: 50%;
    }

    .property-section table div {
        padding-left: 10px;
        padding-top: 10px;
    }
</style>

@code {
    SfDialog DialogObj;
    SfRichTextEditor defaultAPIObj;

    private string Content;
    private bool Enabled = true;
    private bool ReadOnly = false;
    private bool Visibility = false;
    private bool EnableHtmlEncode = false;
    private int MaxLength { get; set; } = 560;
    private bool Checkbox2 { get; set; } = true;
    private bool Checkbox1 { get; set; } = false;
    private bool Checkbox3 { get; set; } = false;
    private string Header = "RichTextEditor's Value";
    private string RteValue = @"<p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p><p><b>API’s:</b></p><ul><li><p>MaxLength - allows restricting the maximum length to be entered.</p></li><li><p>ReadOnly - allows to change it as a non-editable state.</p></li><li><p>Enabled - enable or disable the RTE component.</p></li><li><p>EnableHtmlEncode - Get the encoded string value through value property and source code panel</p></li><li><p>GetValue - get the value of RTE.</p></li></ul>";

    private void ReadOnlyChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        this.ReadOnly = args.Checked;
    }

    private void EnableChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        this.Enabled = args.Checked;
    }

    private void EnableHtmlChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        this.EnableHtmlEncode = args.Checked;
    }

    private async Task GetValueClick()
    {
        this.Content = this.RteValue;
        await this.DialogObj.ShowAsync();
    }

    private async Task SelectAllonClick()
    {
        await this.defaultAPIObj.SelectAllAsync();
    }

    private async Task DlgButtonClick(object arg)
    {
        await this.DialogObj.HideAsync();
    }
}